<template>
  <div class="health-report-container">
    <!-- 头部 -->
    <!--    <div class="header">-->
    <!--      <div class="logo">鹿鸣星空</div>-->
    <!--      <h1>中医健康管理报告</h1>-->
    <!--      <p>TCM HEALTH MANAGEMENT REPORT</p>-->
    <!--      <p>以人为本·创造奇迹</p>-->
    <!--    </div>-->

    <!-- 内容 -->
    <div class="content">
      <!-- 基本信息 -->
      <div class="section">
        <h3 class="section-title">基本信息</h3>
        <div class="basic-info-grid">
          <div class="info-item">
            <span class="info-label">姓名</span>
            <span class="info-value">{{ collectInfoEntity.realName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">性别</span>
            <span class="info-value">{{ collectInfoEntity.sex === '1' ? '男' : '男' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">年龄</span>
            <span class="info-value">{{ collectInfoEntity.age }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">手机号码</span>
            <span class="info-value">{{ collectInfoEntity.phone }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">编号</span>
            <span class="info-value">{{ collectInfoEntity.cardNo }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">评估时间</span>
            <span class="info-value">{{ allData.reqTime ? formatToChineseDateTime(allData.reqTime) : '' }}</span>
          </div>
        </div>
      </div>

      <!-- 舌象 -->

      <!-- 体质类型占比图表 -->
      <div class="section">
        <h3 class="section-title overview-title">中医健康评估综述</h3>
        <div ref="chartContainer" class="chart-container"></div>
      </div>

      <div class="section">

        <table class="custom-table">
          <tr>
            <th colspan="6" class="table-header">舌象测定结果</th>
          </tr>
          <tr>
            <td rowspan="3" class="rowspan-cell">舌体</td>
            <td colspan="2" rowspan="2" class="rowspan-cell">舌色</td>
            <td colspan="3" class="rowspan-cell">舌形</td>
          </tr>
          <tr>
            <td class="rowspan-cell">胖瘦</td>
            <td class="rowspan-cell">老嫩</td>
            <td class="rowspan-cell">裂纹</td>
          </tr>
          <tr>
            <td colspan="2">{{ szPushEntity.lzhiStr }}</td>
            <td>{{ szPushEntity.psStr }}</td>
            <td>{{ szPushEntity.lnStr }}</td>
            <td>{{ szPushEntity.crackStr }}</td>
          </tr>
          <tr>
            <td rowspan="3" class="rowspan-cell">舌苔</td>
            <td colspan="2" class="rowspan-cell">苔质</td>
            <td colspan="3" rowspan="2" class="rowspan-cell">苔色</td>
          </tr>
          <tr>
            <td class="rowspan-cell">厚薄</td>
            <td class="rowspan-cell">腐腻</td>
          </tr>
          <tr>
            <td>{{ szPushEntity.hbStr }}</td>
            <td>{{ szPushEntity.fnStr }}</td>
            <td colspan="3">{{ szPushEntity.lcoatStr }}</td>
          </tr>
          <tr>
            <td class="rowspan-cell">整体舌象结果</td>
            <td colspan="5">{{ szPushEntity.totalTongueFeatureDesc }}</td>
          </tr>
        </table>
      </div>


      <!-- 脉象 -->
      <div class="section">
        <table class="custom-table" style="table-layout: fixed;">
          <tr>
            <th colspan="7" class="table-header">脉象测定结果</th>
          </tr>
          <tr>
            <th class="slash-wrap rowspan-cell">
              <span class="left ">采集部位</span>
              <span class="slash"></span>
              <span class="right ">采集要素</span>
            </th>
            <th class="rowspan-cell">脉位</th>
            <th class="rowspan-cell">脉率</th>
            <th class="rowspan-cell">节律</th>
            <th class="rowspan-cell">脉力</th>
            <th class="rowspan-cell">紧张度</th>
            <th class="rowspan-cell">流利度</th>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左寸</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? mzPushEntity.leftCun.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左关</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? mzPushEntity.leftGuan.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左尺</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? mzPushEntity.leftChi.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右寸</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? mzPushEntity.rightCun.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右关</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? mzPushEntity.rightGuan.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右尺</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.maiweiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.mailvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.jielvFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.mailiFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.jinzhangduFeatureDesc : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? mzPushEntity.rightChi.liuliduFeatureDesc : '' }}</td>
          </tr>
          <tr>
            <td class="rowspan-cell">整体脉象结果</td>
            <td colspan="6">{{ mzPushEntity.totalPulseFeatureDesc }}</td>
          </tr>
        </table>
      </div>


      <!-- 面诊 -->
      <div class="section">
        <table class="custom-table">
          <tr>
            <th colspan="3" class="table-header">面诊测定结果</th>
          </tr>
          <tr>
            <td class="rowspan-cell" rowspan="2">面</td>
            <td class="rowspan-cell">面色</td>
            <td class="rowspan-cell">光泽</td>
          </tr>
          <tr>
            <td>{{ facePushEntity.color ? facePushEntity.color : '/' }}</td>
            <td>{{ facePushEntity.light ? facePushEntity.light : '/' }}</td>
          </tr>
          <tr>
            <td class="rowspan-cell" rowspan="2">唇</td>
            <td class="rowspan-cell" colspan="2">唇色</td>
          </tr>
          <tr>
            <td colspan="2">{{ facePushEntity.light ? facePushEntity.lip : '/' }}</td>
          </tr>
          <tr>
            <td class="rowspan-cell">整体面诊结果</td>
            <td colspan="2">{{ facePushEntity.totalFaceFeatureDesc ? facePushEntity.totalFaceFeatureDesc : '/' }}</td>
          </tr>
        </table>
      </div>

      <!-- 综述 -->
      <div class="section">
        <h3 class="section-title">综述</h3>
        <div class="tip">
          根据本次检测分析，您的脏腑与经络状态存在不平衡的情况，其脏腑辨识结果为：<strong>{{
            mzPushEntity.visceraResult
          }}</strong>，其经络辨识结果为：<strong>{{ mzPushEntity.meridianResult }}</strong>。同时我们对您的全身功能状态进行了总体的分析与评估，得出您的体质辨识结果为：<strong>{{
            wzPushEntity.totalConsultationFeatureDesc
          }}</strong>。
        </div>
      </div>


      <!-- 脉象解读 -->
      <div class="section">
        <h3 class="section-title overview-title">脉象解读</h3>
        <h3 class="section-title">脉图</h3>
        <div class="charts-container">
          <div class="chart-item" v-for="chart in pulseCharts" :key="chart.id">
            <div class="chart-title">{{ chart.title }}</div>
            <div :id="chart.id" class="chart-container"></div>
          </div>
        </div>
      </div>

      <!-- 脉象要素分析图 -->
      <div class="section">
        <h3 class="section-title">脉象要素分析图</h3>
        <div class="pulse-charts-container">
          <!-- 脉位偏差分析图容器 -->
          <div id="pulsePosition" class="pulse-chart"></div>
          <!-- 脉率偏差分析图容器 -->
          <div id="pulseRate" class="pulse-chart"></div>
          <!-- 脉形要素分析图容器 -->
          <div id="pulseShape" class="pulse-chart"></div>
          <!-- 脉力偏差分析图容器 -->
          <div id="pulseForce" class="pulse-chart"></div>
        </div>
      </div>

      <!-- 脉象参数量化表 -->
      <div class="section">
        <table class="custom-table" style="table-layout: fixed;">
          <tr>
            <th colspan="7" class="table-header">脉象测定结果</th>
          </tr>
          <tr>
            <th class="slash-wrap rowspan-cell" rowspan="2">
              <span class="left">采集部位</span>
              <span class="slash"></span>
              <span class="right ">采集要素</span>
            </th>
            <th class="rowspan-cell">脉位</th>
            <th class="rowspan-cell">脉率</th>
            <th class="rowspan-cell">节律</th>
            <th class="rowspan-cell">脉力</th>
            <th class="rowspan-cell">紧张度</th>
            <th class="rowspan-cell">流利度</th>
          </tr>
          <tr>
            <td class="rowspan-cell">200-350</td>
            <td class="rowspan-cell">60-100</td>
            <td class="rowspan-cell">0-0.15</td>
            <td class="rowspan-cell">16-25</td>
            <td class="rowspan-cell">&lt;0.70</td>
            <td class="rowspan-cell">&lt;0.60</td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左寸</td>
            <td>{{ mzPushEntity.leftCun ? formatGridData(mzPushEntity.leftCun.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? formatGridData(mzPushEntity.leftCun.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? formatGridData(mzPushEntity.leftCun.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.leftCun ? formatGridData(mzPushEntity.leftCun.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.leftCun ? (mzPushEntity.leftCun.jinZhangDu < 0.7 ? mzPushEntity.leftCun.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.leftCun ? (mzPushEntity.leftCun.liuLiDu < 0.6 ? mzPushEntity.leftCun.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左关</td>
            <td>{{ mzPushEntity.leftGuan ? formatGridData(mzPushEntity.leftGuan.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? formatGridData(mzPushEntity.leftGuan.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? formatGridData(mzPushEntity.leftGuan.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.leftGuan ? formatGridData(mzPushEntity.leftGuan.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.leftGuan ? (mzPushEntity.leftGuan.jinZhangDu < 0.7 ? mzPushEntity.leftGuan.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.leftGuan ? (mzPushEntity.leftGuan.liuLiDu < 0.6 ? mzPushEntity.leftGuan.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">左尺</td>
            <td>{{ mzPushEntity.leftChi ? formatGridData(mzPushEntity.leftChi.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? formatGridData(mzPushEntity.leftChi.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? formatGridData(mzPushEntity.leftChi.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.leftChi ? formatGridData(mzPushEntity.leftChi.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.leftChi ? (mzPushEntity.leftChi.jinZhangDu < 0.7 ? mzPushEntity.leftChi.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.leftChi ? (mzPushEntity.leftChi.liuLiDu < 0.6 ? mzPushEntity.leftChi.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右寸</td>
            <td>{{ mzPushEntity.rightCun ? formatGridData(mzPushEntity.rightCun.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? formatGridData(mzPushEntity.rightCun.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? formatGridData(mzPushEntity.rightCun.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.rightCun ? formatGridData(mzPushEntity.rightCun.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.rightCun ? (mzPushEntity.rightCun.jinZhangDu < 0.7 ? mzPushEntity.rightCun.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.rightCun ? (mzPushEntity.rightCun.liuLiDu < 0.6 ? mzPushEntity.rightCun.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右关</td>
            <td>{{ mzPushEntity.rightGuan ? formatGridData(mzPushEntity.rightGuan.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? formatGridData(mzPushEntity.rightGuan.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? formatGridData(mzPushEntity.rightGuan.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.rightGuan ? formatGridData(mzPushEntity.rightGuan.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.rightGuan ? (mzPushEntity.rightGuan.jinZhangDu < 0.7 ? mzPushEntity.rightGuan.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.rightGuan ? (mzPushEntity.rightGuan.liuLiDu < 0.6 ? mzPushEntity.rightGuan.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>
          <tr>
            <td class="position-cell rowspan-cell">右尺</td>
            <td>{{ mzPushEntity.rightChi ? formatGridData(mzPushEntity.rightChi.maiWei, 200, 350) : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? formatGridData(mzPushEntity.rightChi.maiLv, 60, 100) : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? formatGridData(mzPushEntity.rightChi.jieLv, 0, 0.15) : '' }}</td>
            <td>{{ mzPushEntity.rightChi ? formatGridData(mzPushEntity.rightChi.maiLi, 16, 25) : '' }}</td>
            <td>
              {{
                mzPushEntity.rightChi ? (mzPushEntity.rightChi.jinZhangDu < 0.7 ? mzPushEntity.rightChi.jinZhangDu.toFixed(2) : `${mzPushEntity.leftCun.jinZhangDu.toFixed(2)}↑`) : ''
              }}
            </td>
            <td>
              {{
                mzPushEntity.rightChi ? (mzPushEntity.rightChi.liuLiDu < 0.6 ? mzPushEntity.rightChi.liuLiDu.toFixed(2) : `${mzPushEntity.leftCun.liuLiDu.toFixed(2)}↑`) : ''
              }}
            </td>
          </tr>

        </table>
      </div>

      <!-- 舌象解读 -->
      <div class="section">
        <h3 class="section-title overview-title">舌象解读</h3>
        <div class="tongue-analysis-container">
          <div class="tongue-content">
            <div class="tongue-img">
              <div class="tongue-title">舌象图片</div>
              <img
                :src="szPushEntity.tongueOriginalImg"
                alt="舌图">
            </div>
            <div ref="tongueChart" class="tongue-chart-container"></div>
          </div>

          <table class="custom-table">
            <thead>
            <tr>
              <th colspan="4" class="table-header">舌象特征提示</th>
            </tr>
            <tr>
              <th class="rowspan-cell">舌象特征</th>
              <th class="rowspan-cell">数值</th>
              <th class="rowspan-cell">特征结果</th>
              <th class="rowspan-cell">参考范围</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="rowspan-cell">舌色指数</td>
              <td>{{
                  szPushEntity.tzhiStandard ? analyzeRange(szPushEntity.tzhiStandard, szPushEntity.tzhiIndex) : ''
                }}
              </td>
              <td>{{ szPushEntity.lzhiStr }}</td>
              <td>{{ szPushEntity.tzhiStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">苔色指数</td>
              <td>{{
                  szPushEntity.tcoatStandard ? analyzeRange(szPushEntity.tcoatStandard, szPushEntity.tcoatIndex) : ''
                }}
              </td>
              <td>{{ szPushEntity.lcoatStr }}</td>
              <td>{{ szPushEntity.tcoatStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">胖瘦指数</td>
              <td>{{ szPushEntity.psStandard ? analyzeRange(szPushEntity.psStandard, szPushEntity.psIndex) : '' }}</td>
              <td>{{ szPushEntity.psStr }}</td>
              <td>{{ szPushEntity.psStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">厚薄指数</td>
              <td>{{ szPushEntity.hbStandard ? analyzeRange(szPushEntity.hbStandard, szPushEntity.hbIndex) : '' }}</td>
              <td>{{ szPushEntity.hbStr }}</td>
              <td>{{ szPushEntity.hbStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">腐腻指数</td>
              <td>{{ szPushEntity.fnStandard ? analyzeRange(szPushEntity.fnStandard, szPushEntity.fnIndex) : '' }}</td>
              <td>{{ szPushEntity.fnStr }}</td>
              <td>{{ szPushEntity.fnStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">老嫩指数</td>
              <td>{{ szPushEntity.lnStandard ? analyzeRange(szPushEntity.lnStandard, szPushEntity.lnIndex) : '' }}</td>
              <td>{{ szPushEntity.lnStr }}</td>
              <td>{{ szPushEntity.lnStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">点刺指数</td>
              <td>{{
                  szPushEntity.spotsthornStandard ? analyzeRange(szPushEntity.spotsthornStandard, szPushEntity.spotsthornIndex) : ''
                }}
              </td>
              <td>
                {{
                  szPushEntity.spotsthornIndex ? (Number(szPushEntity.spotsthornIndex) < 1 ? '无点刺' : '有点刺') : ''
                }}
              </td>
              <td>{{ szPushEntity.spotsthornStandard }}</td>
            </tr>
            <tr>
              <td class="rowspan-cell">齿痕指数</td>
              <td>{{
                  szPushEntity.teethmarkStandard ? analyzeRange(szPushEntity.teethmarkStandard, szPushEntity.teethmarkIndex) : ''
                }}
              </td>
              <td>
                {{ szPushEntity.teethmarkIndex ? (Number(szPushEntity.teethmarkIndex) < 1 ? '无齿痕' : '有齿痕') : '' }}
              </td>
              <td>{{ szPushEntity.teethmarkStandard }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>


      <!-- 面向解读 -->
      <div class="section">
        <h3 class="section-title overview-title">面向解读</h3>
        <div class="tongue-content face-content">
          <div class="tongue-img">
            <div class="tongue-title">面象图</div>
            <img
              :src="facePushEntity.faceOriginalImg"
              alt="面象图">
          </div>
          <div class="face-analysis">
            <div class="tip">
              <p>{{ facePushEntity.totalFaceFeatureDesc }}</p>
              <p>{{ facePushEntity.lipDescription }}</p>
              <p>{{ facePushEntity.lightDescription }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 中医体检检测结果(一) 体质状态评估 -->
      <div class="section">
        <h3 class="section-title overview-title">中医体检检测结果(一) 体质状态评估</h3>

        <!-- 体质状态雷达图 -->
        <div ref="constitutionChart" class="chart-container"></div>

        <!-- 结果分析 -->
        <div class="tip">
          <p>根据中医健康评估分析得出您的体质结果为<span
            style="color: red; font-weight: bold;">{{ wzPushEntity.totalConsultationFeatureDesc }}</span></p>
          <h4>您的结果分析</h4>
          <p>
            {{ wzPushEntity.result ? wzPushEntity.result.resultAnalysis : '' }}
          </p>
        </div>

        <!-- 体质特征 -->
        <div class="constitution-features">
          <h4>体质特征</h4>
          <div class="feature-tags">
            <template v-if="wzPushEntity.result&&wzPushEntity.result.constitutionCharacteristics">
              <span class="feature-tag" :style="{ 'background-color': getRandomColor() }"
                    v-for="(item,index) in wzPushEntity.result.constitutionCharacteristics.split(',')"
                    :key="index">{{ item }}</span>
            </template>
          </div>
        </div>

        <!-- 饮食建议 -->
        <div class="diet-suggestion">
          <h4>饮食建议</h4>
          <p class="diet-tip diet-green">✔
            宜：{{ wzPushEntity.result && wzPushEntity.result.dietAdvice }}
          </p>
          <p class="diet-tip diet-red">✖
            忌：{{ wzPushEntity.result && wzPushEntity.result.dietAvoid }}</p>
        </div>

        <!-- 季节调理 -->
        <div class="season-adjustment">
          <h4>季节调理</h4>
          <p>
            秋季，天气干燥，为肺脏当令季节，故秋天应注意对肺脏的调理，辛味食物发散泻肺，而秋天宜收不宜散，所以此类食物应尽量少吃，尤其对阴虚有内热的人群，秋季应谨防秋燥症的发生，秋季的养生原则就是：适当增加酸味食物，以养阴，同时减少辛辣食物的摄入，以防燥热伤阴，切记不可妄进温补、滋补之品，以加重阴虚内热的症状。</p>
        </div>

        <!-- 运动调理 -->
        <div class="exercise-adjustment">
          <h4>运动调理</h4>
          <p>
            {{ wzPushEntity.result && wzPushEntity.result.exerciseAdvice }}
          </p>
          <template v-if="wzPushEntity.result&&wzPushEntity.result.exerciseList">
            <div class="exercise-movement" v-for="(item,index) in wzPushEntity.result.exerciseList" :key="index">
              <table class="custom-table">
                <tr>
                  <th colspan="2" class="table-header">{{ item.exerciseName }}</th>
                </tr>
                <tr>
                  <td style="text-align: left; vertical-align: top; width: 66.67%;">
                    <p v-for="(item1, index1) in item.exerciseContent.split('\n')" :key="index1">
                      {{ item1 }}
                    </p>
                  </td>
                  <td style="width: 33.33%;">
                    <img :src="item.exerciseImage" alt="运动示意图" style="width: 100%; height: auto;">
                  </td>
                </tr>
              </table>
            </div>
          </template>
        </div>
      </div>


      <!-- 中医体检检测结果(二)脏腑状态评估 -->
      <div class="section">
        <h3 class="section-title overview-title">中医体检检测结果(二) 脏腑状态评估</h3>
        <div class="result-intro">
          根据检测数据分析，您的脏腑状态分析提示您可能存在以下脏腑异常状态:{{
            mzPushEntity.mpulseDiagnosisEntity ? mzPushEntity.mpulseDiagnosisEntity.syndromeFeatures : ''
          }}，其关联证型为{{
            mzPushEntity.mpulseDiagnosisEntity ? mzPushEntity.mpulseDiagnosisEntity.syndromeTypes : ''
          }}。
        </div>

        <div class="container">
          <!-- 左侧列 - 图标在左侧，布局与右侧完全一致 -->
          <div class="column left-column">
            <!-- 肺与大肠 -->
            <div class="organ-group" v-for="(item,index) in organInfo.left" :key="index">
              <div class="organ-section">
                <div class="organ-icon">
                  <img :src="item.pic" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                </div>
                <div class="organ-content">
                  <div class="organ-pair" v-for="(item2,index2) in  item.organ" :key="index2">
                    <div class="organ-info-wrapper">
                      <div class="organ-name">{{ item2.name }}</div>
                      <div class="stars">
                        <template v-for="num in 5" >
                          <div :class="`star star-half ${item.color}`" v-if="(num+0.5) === item2.starNum" />
                          <div :class="`star star-filled ${item.color}`" v-else-if="num < item2.starNum " />
                          <div class="star" v-else/>
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="data-status-row" :class="item.color">
                    <div class="data-status status-deficiency" v-for="(item3,index3) in item.result" :key="index3">
                      <span>{{ item3 }}</span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 中间人体图 -->
          <div class="center-column">
            <div class="body-diagram">
              <img src="@/assets/images/人体.png"
                   alt="人体脏腑位置图" class="diagram-img">
            </div>
          </div>

          <!-- 右侧列 - 图标在右侧 -->
          <div class="column right-column">
            <!-- 心与小肠 -->
            <div class="organ-group" v-for="(item,index) in organInfo.right" :key="index">
              <div class="organ-section">
                <div class="organ-content">
                  <div class="organ-pair" v-for="(item2,index2) in  item.organ" :key="index2">
                    <div class="organ-info-wrapper">
                      <div class="organ-name">{{ item2.name }}</div>
                      <div class="stars">
                        <template v-for="num in 5" >
                          <div :class="`star star-half ${item.color}`" v-if="(num+0.5) === item2.starNum" />
                          <div :class="`star star-filled ${item.color}`" v-else-if="num < item2.starNum " />
                          <div class="star" v-else/>
                        </template>
                      </div>
                    </div>
                  </div>
                  <div class="data-status-row" :class="item.color">
                    <div class="data-status status-deficiency" v-for="(item3,index3) in item.result" :key="index3">
                      <span>{{ item3 }}</span></div>
                  </div>
                </div>
                <div class="organ-icon">
                  <img :src="item.pic" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="bladder-status">
          <h3>{{ mzPushEntity.mpulseDiagnosisEntity ? mzPushEntity.mpulseDiagnosisEntity.syndromeFeatures : '' }}</h3>
          <p><span style="fontWeight : bold">常见症状:</span>
            {{ mzPushEntity.mpulseDiagnosisEntity ? mzPushEntity.mpulseDiagnosisEntity.commonSymptoms : '' }}</p>
          <p><span style="fontWeight : bold">疾病风险:</span>
            {{ mzPushEntity.mpulseDiagnosisEntity ? mzPushEntity.mpulseDiagnosisEntity.diseaseRisk : '' }}</p>
        </div>
        <div class="explanation">
          <span style="color: red; font-weight: bold;">解读说明:</span>带颜色星号，表示该脏腑的健康状态，5颗表示处于最佳水平；灰色星号则指示健康状况存在偏颇。
        </div>
        <h2>您的脏腑辨识结果分析:</h2>
        <template v-if="mzPushEntity.mpulseDiagnosisEntity&&mzPushEntity.mpulseDiagnosisEntity.zangFuAnalysis">
          <div class="analysis" v-for="(item,index) in mzPushEntity.mpulseDiagnosisEntity.zangFuAnalysis.split('\n')"
               :key="index">
            {{ item }}
          </div>
        </template>
        <table class="custom-table">
          <thead>
          <tr>
            <th colspan="4" class="table-header">相关方剂</th>
          </tr>
          <tr>
            <th class="rowspan-cell">证型</th>
            <th class="rowspan-cell">治疗方法</th>
            <th class="rowspan-cell">方剂名称</th>
            <th class="rowspan-cell">方剂组成</th>
          </tr>
          </thead>
          <tbody>
          <template v-if="prescriptions">
            <template v-for="(item, index) in prescriptions">
              <template v-for="(item2,index2) in item.formula">
                <tr v-if="index2 === 0">
                  <td :rowspan="item.formula.length">{{ item.syndromeType }}</td>
                  <td :rowspan="item.formula.length">{{ item.treatmentMethod }}</td>
                  <td>{{ item2 }}</td>
                  <td>{{ item.formulaComposition[index2] }}</td>
                </tr>
                <tr v-else>
                  <td>{{ item2 }}</td>
                  <td>{{ item.formulaComposition[index2] }}</td>
                </tr>
              </template>

            </template>

          </template>

          </tbody>
        </table>
      </div>


      <!-- 中医体检检测结果(三) - 经络状态评估 -->
      <div class="section">
        <h3 class="section-title overview-title">中医体检检测结果(三) - 经络状态评估</h3>


        <div ref="meridianChart" class="chart-container"></div>

        <div class="analysis-container">
          <div class="analysis-left">
            <div class="analysis">
              <p><strong>根据中医检测的经络分析得出您的经络辨识结果为<span
                style="color: red; font-weight: bold;">{{ mzPushEntity.meridianResult }}</span>。</strong></p>
              <p><strong>您的经络辨识结果分析：</strong></p>
              <p>
                {{ mzPushEntity.meridianPlan }}
              </p>
              <p><strong>治疗/调养原则：{{ mzPushEntity.treatmentPrinciplesForMeridian }}</strong></p>
            </div>
          </div>
          <div class="analysis-right">
            <!-- 这里可以放置图片 -->
            <img :src="mzPushEntity.meridianColdHeatBitmap" v-if="mzPushEntity.meridianColdHeatBitmap" alt="经络图">
          </div>
        </div>

        <table class="custom-table">
          <thead>
          <tr>
            <th colspan="3" class="table-header">治疗/调养穴位</th>
          </tr>
          <tr>
            <th class="rowspan-cell">穴位名称</th>
            <th class="rowspan-cell">穴位定位</th>
            <th class="rowspan-cell">操作方法</th>
          </tr>
          </thead>
          <tbody>
          <template v-if="mzPushEntity.acupointList">
            <tr v-for="(item,index) in mzPushEntity.acupointList" :key="index">
              <td class="rowspan-cell">{{ item.acupoint }}</td>
              <td>
                <!-- 在穴位定位文字上方添加图片 -->
                <div v-if="item.imgBitmap" class="acupoint-image-container">
                  <img :src="item.imgBitmap" :alt="item.acupoint + '穴位图'" class="acupoint-image">
                </div>
                {{ item.location }}
              </td>
              <td style="text-align: left;">
                {{ item.treatment }}<br>
                {{ item.physiotherapy }}
              </td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>


    </div>
  </div>
</template>


<script>
import * as echarts from 'echarts'
import {getZkxcReport} from "@/api/health/healthReport";

export default {
  name: 'healthReportDetailSz',
  data() {
    return {
      allData: {},
      customerId: null,
      reportId: null,
      basicInfo: {
        realName: '',
        gender: '',
        age: 0,
        phone: null,
        cardNo: '',
        time: null,
      },
      collectInfoEntity: {},
      szPushEntity: {},
      mzPushEntity: {},
      facePushEntity: {},
      wzPushEntity: {},

      prescriptions: [

      ],
      acupoints: [
        {
          name: '前谷',
          location: '第五掌指关节前尺侧，横纹头赤白肉际处',
          method: '按揉2-3分钟'
        },
        {
          name: '阳谷',
          location: '手腕尺侧，尺骨茎突与三角骨之间凹陷',
          method: '按揉5分钟，每日2次'
        },
        {
          name: '小海',
          location: '肘内侧，尺骨鹰嘴与肱骨内上髁之间',
          method: '按压或按揉3-5分钟'
        },
        {
          name: '脾俞',
          location: '第十一胸椎棘突下，旁开1.5寸',
          method: '指揉10-15分钟'
        },
        {
          name: '关元',
          location: '前正中线，脐下3寸',
          method: '温灸3- 5分钟或按摩'
        }
      ],
      pulseCharts: [
        {id: 'leftCun', title: '左寸'},
        {id: 'rightCun', title: '右寸'},
        {id: 'leftGuan', title: '左关'},
        {id: 'rightGuan', title: '右关'},
        {id: 'leftChi', title: '左尺'},
        {id: 'rightChi', title: '右尺'}
      ],
      // 体质类型数据
      constitutionData: {
        categories: ['平和质', '气虚质', '气郁质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '特禀质'],
        values: [],
        colors: ['#00bfa5', '#00bfa5', '#00bfa5', '#ffb74d', '#00bfa5', '#f44336', '#f44336', '#ffb74d', '#00bfa5']
      },
      // 脉象要素分析图数据
      chartData: {
        maiWei: {
          chatRef: 'pulsePosition',
          title: '脉位偏差分析图',
          xAxis: ['左寸', '左关', '左尺', '右寸', '右关', '右尺'],

        },
        maiLv: {
          chatRef: 'pulseRate',
          title: '脉率偏差分析图',
          xAxis: ['左寸', '左关', '左尺', '右寸', '右关', '右尺'],

        },
        veinElement: {
          chatRef: 'pulseShape',
          title: '脉形要素分析图',
          xAxis: ['左寸', '左关', '右寸', '左尺', '右关', '右尺'],
        },
        maiLi: {
          chatRef: 'pulseForce',
          title: '脉力偏差分析图',
          xAxis: ['左寸', '左关', '左尺', '右寸', '右关', '右尺'],
        }
      },
      organInfo: {
        left: [
          {
            pic: require('@/assets/images/肺.png'),
            organ: [
              {name: '肺', starNum: 0},
              {name: '大肠', starNum: 0}
            ],
            color: 'fei',
            result: [`肺：无有效数据`, `大肠：无有效数据`]
          },
          {
            pic: require('@/assets/images/胃.png'),
            organ: [
              {name: '脾', starNum: 0},
              {name: '胃', starNum: 0}
            ],
            color: 'pi',
            result: [`脾：无有效数据`, `胃：无有效数据`]
          },
          {
            pic: require('@/assets/images/人.png'),
            organ: [
              {name: '心包', starNum: 0},
              {name: '三焦', starNum: 0}
            ],
            color: 'xinbao',
            result: [`心包：无有效数据`, `三焦：无有效数据`]
          },
        ],
        right: [
          {
            pic: require('@/assets/images/心.png'),
            organ: [
              {name: '心', starNum: 0},
              {name: '小肠', starNum: 0}
            ],
            color: 'xin',
            result: [`心：无有效数据`, `小肠：无有效数据`]
          },
          {
            pic: require('@/assets/images/肝.png'),
            organ: [
              {name: '肝', starNum: 0},
              {name: '胆', starNum: 0}
            ],
            color: 'gan',
            result: [`肝：无有效数据`, `胆：无有效数据`]
          },
          {
            pic: require('@/assets/images/肾.png'),
            organ: [
              {name: '肾', starNum: 0},
              {name: '膀胱', starNum: 0}
            ],
            color: 'shen',
            result: [`肾：无有效数据`, `膀胱：无有效数据`]
          },
        ]
      },
    }
  },
  created() {
    this.reportId = this.$route.params && this.$route.params.reportId

  },
  mounted() {
    getZkxcReport(this.reportId).then(res => {
      this.allData = res.data
      this.collectInfoEntity = res.data.baseEntity.collectInfoEntity||{}
      this.szPushEntity = this.allData.baseEntity.szPushEntity||{}
      this.mzPushEntity = this.allData.baseEntity.mzPushEntity||{}
      this.facePushEntity = this.allData.baseEntity.facePushEntity||{}
      this.wzPushEntity = this.allData.baseEntity.wzPushEntity||{}
      this.constitutionData.values = this.allData.baseEntity.wzPushEntity ? this.allData.baseEntity.wzPushEntity.nums : []
      this.initConstitutionChart() // 初始化体质类型图表
      this.initCharts() // 初始化脉象图表
      this.initPulseElementCharts() // 初始化脉象要素分析图
      this.initTongueChart() // 初始化舌象图表
      this.initConstitutionRadarChart() // 初始化体质状态雷达图
      this.initMeridianChart() // 初始化经络状态图表
      this.initOrganInfo()
      this.extractFormulas()
    })


  },
  methods: {
    extractFormulas() {
      if(!this.mzPushEntity||this.mzPushEntity.prescriptions){
        return
      }
      const datas= this.mzPushEntity.prescriptions
      datas.forEach(data => {
        let index = 1;
        const item={syndromeType:data.syndromeType,treatmentMethod:data.treatmentMethod,formula:[],formulaComposition:[]}
        while (true) {
          const formulaKey = `formula${index}`;
          const compositionKey = `formula${index}Composition`;

          // 检查是否存在 formula 和 composition
          if (data[formulaKey] !== undefined  && data[compositionKey] !== undefined) {
            item.formula.push(data[formulaKey]?data[formulaKey]:'-')
            item.formulaComposition.push(data[compositionKey]?data[compositionKey]:'-')
            index++;
          } else {
            // 只要有一个不存在就停止
            break;
          }
        }
        this.prescriptions.push(item)
      })



    },
    convertToMap(dataArray) {
      // 获取包含所需数据的数组

      // 创建一个新的 Map
      const organsMap = {};

      // 遍历数组，构建 Map
      dataArray.forEach(item => {
        if(item.mpulseJLItem){
          const {internalOrgans, pulseStatus} = item.mpulseJLItem;
          const starNum = item.visceraAndMeridianScoreValue;

          organsMap[internalOrgans]={
            starNum: starNum,
            pulseStatus: pulseStatus
          };
        }

      });

      return organsMap;
    },
    initOrganInfo() {
      const data = this.mzPushEntity.visceraAndMeridianChart;

      function getCallbackfn(map) {
        return item => {
          item.result = []
          item.organ.forEach(item2 => {
            if (map[item2.name]) {
              item2.starNum = map[item2.name].starNum
              item.result.push(item2.name+'：'+(map[item2.name].pulseStatus==='平和'?'正常':`${map[item2.name].pulseStatus}证`))
            }else {
              item.result.push(item2.name+'：无有效数据')
            }
          })
          console.log(item)
        };
      }

      if (data) {
        const map = this.convertToMap(data)
        this.organInfo.left.forEach(getCallbackfn(map))
        this.organInfo.right.forEach(getCallbackfn(map))
      }

    },
    // 添加获取随机颜色的方法
    getRandomColor() {
      const colors = ['#ff7a45', '#00bfa5', '#2196f3', '#f50057', '#9c27b0', '#ff9800', '#00bcd4', '#8bc34a'];
      return colors[Math.floor(Math.random() * colors.length)];
    },
    formatGridData(data, min, max) {
      if (data < min) {
        return data.toFixed(2) + '↓'
      } else if (data > max) {
        return data.toFixed(2) + '↑'
      } else {
        return data.toFixed(2)
      }
    },
    formatToChineseDateTime(isoString) {
      // 1. 解析 ISO 8601 字符串为 Date 对象
      const date = new Date(isoString);

      // 2. 提取年、月、日、时、分、秒
      const year = date.getFullYear();
      // getMonth() 返回 0-11，所以需要 +1
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      // 3. 拼接成 "年月日 时分秒" 格式的字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    ,
// 初始化经络状态图表
    initMeridianChart() {
      function extracted(data) {
        return {
          data: data,
          type: 'bar',
          itemStyle: {
            color: function (params) {
              // 根据数值判断颜色
              if (Math.abs(params.value) > 1) {
                return '#000'; // 虚
              }
              return '#33cc33'; // 正常

            }
          },
          label: {
            show: true,
            position: 'bottom',
            formatter: function (params) {
              return params.value;
            }
          },
          markLine: {
            symbol: ['none', 'none'],
            data: [
              {
                yAxis: 1,
                lineStyle: {
                  color: '#ff0000',
                  type: 'dashed',
                  width: 1
                },
                label: {
                  show: true,
                  position: 'end',
                  formatter: '实证参考线'
                }
              },
              {
                yAxis: -1,
                lineStyle: {
                  color: '#0000ff',
                  type: 'dashed',
                  width: 1
                },
                label: {
                  show: true,
                  position: 'end',
                  formatter: '虚证参考线'
                }
              }
            ]
          }
        };
      }

      this.$nextTick(() => {
        const chartDom = this.$refs.meridianChart;
        if (chartDom) {
          const myChart = echarts.init(chartDom);

          // 配置图表数据
          const option = {
            xAxis: {
              type: 'category',
              data: ['心经', '小肠经', '肝经', '胆经', '肾经', '膀胱经', '肺经', '大肠经', '脾经', '胃经', '心包经', '三焦经']
            },
            yAxis: {
              type: 'value',
              min: -5,
              max: 5
            },
            series: (this.mzPushEntity&&this.mzPushEntity.visceraAndMeridianChart)?[extracted.call(this, this.mzPushEntity.visceraAndMeridianChart.map(item => {
              if (item.visceraAndMeridianValue) {
                return item.visceraAndMeridianValue[1].toFixed(2)
              }
              return 0
            })), extracted.call(this, this.mzPushEntity.visceraAndMeridianChart.map(item => {
              if (item.visceraAndMeridianValue) {
                return item.visceraAndMeridianValue[0].toFixed(2)
              }
              return 0
            }))]:[],
            grid: {
              left: '5%',
              right: '5%',
              top: '10%',
              bottom: '15%'
            },
            tooltip: {
              trigger: 'item',
              formatter: function (params) {
                let status = '';
                if (params.value > 1) {
                  status = '实证';
                } else if (params.value < -1) {
                  status = '虚证';
                } else {
                  status = '正常';
                }
                return params.name + '<br/>' +
                  '数值: ' + params.value + '<br/>' +
                  '状态: ' + status;
              }
            }
          };

          // 使用配置项显示图表
          myChart.setOption(option);

          // 监听窗口大小变化，自适应图表
          window.addEventListener('resize', () => {
            myChart.resize();
          });
        }
      });
    }
    ,
// 生成模拟脉象数据
    generatePulseData(code) {
      // 减少数据点数量，从100个减少到30个
      return this.mzPushEntity ? (this.mzPushEntity[code]?this.mzPushEntity[code].optPulse1:[]) : []
    }
    ,
// 初始化图表
    initCharts() {
      // 脉象图表配置
      const option = {
        grid: {
          left: '10%',
          right: '5%',
          top: '10%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 10
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          show: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#eee'
            }
          }
        },
        // series: [{
        //   data: this.generatePulseData(),
        //   type: 'line',
        //   smooth: true,
        //   showSymbol: false,
        //   lineStyle: {
        //     color: '#c41e3a',
        //     width: 2
        //   },
        //   areaStyle: {
        //     color: 'rgba(196, 30, 58, 0.1)'
        //   }
        // }],
        animation: false
      }

      // 创建图表实例
      this.pulseCharts.forEach(chart => {
        option.series = [{
          data: this.generatePulseData(chart.id),
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: '#c41e3a',
            width: 2
          },
          areaStyle: {
            color: 'rgba(196, 30, 58, 0.1)'
          }
        }]
        const chartDom = document.getElementById(chart.id)
        if (chartDom) {
          const chartInstance = echarts.init(chartDom)
          chartInstance.setOption(option)
        }
      })
    }
    ,
// 初始化体质类型图表
    initConstitutionChart() {
      // 确保DOM已渲染
      this.$nextTick(() => {
        const chartDom = this.$refs.chartContainer
        if (chartDom) {
          const myChart = echarts.init(chartDom)

          const option = {
            title: {
              // text: '体质类型占比',
              left: 'center',
              textStyle: {
                color: '#333',
                fontSize: 16,
                fontWeight: 'normal'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                var percent = params[0].value;
                return params[0].name + '<br/>' + params[0].marker + params[0].seriesName + ': ' + percent;
              }
            },
            xAxis: {
              type: 'category',
              data: this.constitutionData.categories,
              axisLabel: {
                color: '#666'
              }
            },
            yAxis: {
              type: 'value',
              max: 100,
              axisLabel: {
                color: '#666'
              }
            },
            series: [{
              name: '分数',
              type: 'bar',
              data: this.constitutionData.values,
              itemStyle: {
                // 自定义柱子颜色
                color: (params) => {
                  return this.constitutionData.colors[params.dataIndex];
                }
              },
              // 显示柱子上的数值
              label: {
                show: true,
                position: 'top',
                color: 'black',
                formatter: '{c}'
              }
            }],
            grid: {
              left: '5%',
              right: '5%',
              top: '20%',
              bottom: '15%'
            }
          };

          myChart.setOption(option);

          // 监听窗口大小变化，自适应图表
          window.addEventListener('resize', () => {
            myChart.resize();
          });
        }
      });
    },
    getPulseColor(part, max, min, value) {
      if (value > max) {
        return part === 'maiWei' ? '#5096E6' : '#F56C6C'
      } else if (value < min) {
        return part === 'maiWei' ? '#F56C6C' : '#5096E6'
      } else {
        return '#8DD39E'
      }
    },
    getPulseClassify(part, max, min, value) {
      const names = {
        maiWei: {high: '偏浮', low: '偏沉'},
        maiLv: {high: '偏快', low: '偏慢'},
        maiLi: {high: '偏强', low: '偏弱'},
        veinElement: {high: '偏滑', low: '偏弦'}
      }
      if (value > max) {
        return part === 'maiWei' ? names[part].low : names[part].high
      } else if (value < min) {
        return part === 'maiWei' ? names[part].high : names[part].low
      } else {
        return '正常'
      }
    },
// 初始化脉象要素分析图
    initPulseElementCharts() {

      function extracted(data, part) {
        return {
          type: 'bar',
          data: data,
          itemStyle: {
            color: (params) => {
              return this.getPulseColor(part, this.mzPushEntity.leftCun[`${part}UpLineValue`], this.mzPushEntity.leftCun[`${part}DownLineValue`], params.data);
            }
          },
          // barWidth: '20%',
          label: {
            show: true,
            position: 'top',
            formatter: (params) => {
              // 只显示非零数值
              return params.value !== 0 ? (params.value + '%') : 0;
            },
            color: '#333'
          },
          markLine: {
            symbol: ['none', 'none'],
            data: [
              {
                yAxis: this.mzPushEntity.leftCun[`${part}UpLineValue`],
                lineStyle: {type: 'dashed', color: part === 'maiWei' ? '#5096E6' : '#F56C6C'},
                label: {
                  show: true,
                  formatter: function (params) {
                    // 自定义显示的文本，这里加上了 "单位"
                    return params.value + '%';
                  }
                }
              },
              {
                yAxis: this.mzPushEntity.leftCun[`${part}DownLineValue`],
                lineStyle: {type: 'dashed', color: part === 'maiWei' ? '#F56C6C' : '#5096E6'},
                label: {
                  show: true,
                  formatter: function (params) {
                    // 自定义显示的文本，这里加上了 "单位"
                    return params.value + '%';
                  }
                }
              }
            ],
          }
        }
      }

// 通用图表初始化函数
      const initChart = (part, chartConfig) => {
        const chart = echarts.init(document.getElementById(chartConfig.chatRef));
        let series = []
        if (part === 'veinElement') {
          let data = [this.mzPushEntity.leftCun.veinElements[0], this.mzPushEntity.leftGuan.veinElements[0], this.mzPushEntity.leftChi.veinElements[0], this.mzPushEntity.rightCun.veinElements[0], this.mzPushEntity.rightGuan.veinElements[0], this.mzPushEntity.rightChi.veinElements[0]]
          let data1 = [this.mzPushEntity.leftCun.veinElements[1], this.mzPushEntity.leftGuan.veinElements[1], this.mzPushEntity.leftChi.veinElements[1], this.mzPushEntity.rightCun.veinElements[1], this.mzPushEntity.rightGuan.veinElements[1], this.mzPushEntity.rightChi.veinElements[1]]
          series.push(extracted.call(this, data, part));
          series.push(extracted.call(this, data1, part));
        } else {
          let data = this.mzPushEntity?[this.mzPushEntity.leftCun[`${part}Deviation`], this.mzPushEntity.leftGuan[`${part}Deviation`], this.mzPushEntity.leftChi[`${part}Deviation`], this.mzPushEntity.rightCun[`${part}Deviation`], this.mzPushEntity.rightGuan[`${part}Deviation`], this.mzPushEntity.rightChi[`${part}Deviation`]]:[0,0,0,0,0,0]
// 构建系列数据
          series.push(extracted.call(this, data, part));
        }


        chart.setOption({
          title: {
            text: chartConfig.title,
            left: 'center',
            textStyle: {
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              if (params.componentType === 'markLine') {
                return `阈值: ${params.value}%`;
              }
              return `${this.getPulseClassify(part, this.mzPushEntity.leftCun[`${part}UpLineValue`], this.mzPushEntity.leftCun[`${part}DownLineValue`], params.value)}<br/>${params.name}: ${params.value}%`;
            }
          },
          xAxis: {
            type: 'category',
            data: chartConfig.xAxis,
            axisLine: {lineStyle: {color: '#333'}},
            axisTick: {show: true},
          },
          yAxis: {
            type: 'value',
            min: part === 'veinElement' ? -1 : -100,
            max: part === 'veinElement' ? 1 : 100,
            interval: part === 'veinElement' ? 0.2 : 20,
            axisLine: {lineStyle: {color: '#333'}},
            splitLine: {lineStyle: {color: '#eee'}},
            axisLabel: {
              formatter: function (value) {
                // 自定义逻辑
                return value + '%';  // 假设是次数，添加单位
              }
            }
          },
          series: series,
          grid: {left: '15%', right: '15%', bottom: '15%', top: '25%'},
          // legend: {
          //   top: 'top',
          //   right: 'right',
          //   data: chartConfig.series.map(s => s.name),
          //   textStyle: {color: '#333'}
          // }
        });

        return chart;
      }

      // 初始化所有图表
      this.$nextTick(() => {
        //遍历this.chartData的key、value
        Object.entries(this.chartData).forEach(([key, value]) => {
          initChart(key, value)
        })
      });
    },
    analyzeRange(text, targetValue) {
      // 正则表达式：匹配 “标签（最小-最大）” 格式，支持小数
      const regex = /[\u4e00-\u9fa5a-zA-Z]+\s*[(（]\s*([0-9.]+)\s*-\s*([0-9.]+)\s*[)）]/;
      const match = text.match(regex);
      if (!match) {
        return "未找到有效区间";
      }

      const min = parseFloat(match[1]);
      const max = parseFloat(match[2]);

      if (isNaN(min) || isNaN(max)) {
        return "区间解析错误";
      }


      if (targetValue < min) {
        return targetValue + "↓";
      } else if (targetValue > max) {
        return targetValue + "↑";
      } else {
        return targetValue;
      }
    },
    analyzeRange2(text, targetValue) {
      // 正则表达式：匹配 “标签（最小-最大）” 格式，支持小数
      const regex = /[\u4e00-\u9fa5a-zA-Z]+\s*[(（]\s*([0-9.]+)\s*-\s*([0-9.]+)\s*[)）]/;
      const match = text.match(regex);
      if (!match) {
        return "未找到有效区间";
      }

      const min = parseFloat(match[1]);
      const max = parseFloat(match[2]);

      if (isNaN(min) || isNaN(max)) {
        return "区间解析错误";
      }


      if (targetValue < min) {
        return '#68A7FF';
      } else if (targetValue > max) {
        return '#F56C6C';
      } else {
        return '#8DD39E';
      }
    },
// 初始化舌象图表
    initTongueChart() {
      this.$nextTick(() => {
        const tongueChartDom = this.$refs.tongueChart;
        if (tongueChartDom) {
          const myChart = echarts.init(tongueChartDom);

          // 根据表格数据准备图表数据
          const yAxisData = ['舌色指数', '苔色指数', '胖瘦指数', '厚薄指数', '腐腻指数', '老嫩指数', '点刺指数', '齿痕指数'];
          const seriesData = this.szPushEntity?[this.szPushEntity.tzhiIndex.toFixed(2),
            this.szPushEntity.tcoatIndex.toFixed(2),
            this.szPushEntity.psIndex.toFixed(2),
            this.szPushEntity.hbIndex.toFixed(2),
            this.szPushEntity.fnIndex.toFixed(2),
            this.szPushEntity.lnIndex.toFixed(2),
            this.szPushEntity.spotsthornIndex,
            this.szPushEntity.teethmarkIndex]:[0,0,0,0,0,0,0,0];

          // 根据数值大小设置不同颜色
          const colors = this.szPushEntity?[this.analyzeRange2(this.szPushEntity.tzhiStandard, this.szPushEntity.tzhiIndex),
            this.analyzeRange2(this.szPushEntity.tcoatStandard, this.szPushEntity.tcoatIndex),
            this.analyzeRange2(this.szPushEntity.psStandard, this.szPushEntity.psIndex),
            this.analyzeRange2(this.szPushEntity.hbStandard, this.szPushEntity.hbIndex),
            this.analyzeRange2(this.szPushEntity.fnStandard, this.szPushEntity.fnIndex),
            this.analyzeRange2(this.szPushEntity.lnStandard, this.szPushEntity.lnIndex),
            this.analyzeRange2(this.szPushEntity.spotsthornStandard, this.szPushEntity.spotsthornIndex),
            this.analyzeRange2(this.szPushEntity.teethmarkStandard, this.szPushEntity.teethmarkIndex)
          ]:['#68A7FF','#68A7FF','#68A7FF','#68A7FF','#68A7FF','#68A7FF','#68A7FF','#68A7FF'];

          // 配置图表选项
          const option = {
            title: {
              text: '舌象特征分析图',
              left: 'center',
              textStyle: {
                fontSize: 16,
                fontWeight: 'bold'
              }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              },
              formatter: function (params) {
                var param = params[0];
                return param.name + '<br/>' + param.name + ': ' + param.value;
              }
            },
            xAxis: {
              type: 'value',
              max: 4,
              axisLabel: {
                formatter: '{value}'
              }
            },
            yAxis: {
              type: 'category',
              data: yAxisData,
              inverse: true
            },
            series: [{
              name: '数值',
              type: 'bar',
              data: seriesData,
              itemStyle: {
                color: function (params) {
                  return colors[params.dataIndex];
                }
              },
              label: {
                show: true,
                position: 'right',
                formatter: '{c}'
              }
            }],
            grid: {
              left: '15%',
              right: '15%',
              bottom: '15%',
              top: '25%'
            }
          };

          // 使用配置项设置图表
          myChart.setOption(option);
        }
      });
    }
    ,
// 初始化体质状态雷达图
    initConstitutionRadarChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.constitutionChart
        if (chartDom) {
          const myChart = echarts.init(chartDom)

          // 雷达图配置项
          const option = {
            title: {
              text: '体质状态评估',
              top: 10
            },
            radar: {
              indicator: [
                {name: '平和质', max: 100},
                {name: '气虚质', max: 100},
                {name: '痰湿质', max: 100},
                {name: '湿热质', max: 100},
                {name: '血瘀质', max: 100},
                {name: '特禀质', max: 100},
                {name: '气郁质', max: 100},
                {name: '阳虚质', max: 100},
                {name: '阴虚质', max: 100}
              ],
              center: ['50%', '55%'],
              radius: '60%',
              axisName: {
                fontWeight: 'bold',
                color: '#000000'
              }
            },
            series: [{
              name: '体质数据',
              type: 'radar',
              data: [
                {
                  value: this.wzPushEntity.nums,
                  name: '分数',
                  areaStyle: {
                    color: 'rgba(72,255,0,0.5)'  // 半透明橙色填充
                  },
                  lineStyle: {
                    color: 'rgba(72,255,0,0.5)',  // 线条颜色
                    width: 1
                  },
                  symbol: 'circle',     // 数据点形状
                  symbolSize: 2         // 点大小
                }
              ]
            }]
          }

          // 使用配置项渲染图表
          myChart.setOption(option)

          // 监听窗口大小变化，自适应图表
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.health-report-container {
  max-width: 900px;
  height: calc(100vh - 84px - 40px);
  margin: 20px auto;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
  font-family: "Microsoft YaHei", sans-serif;
  color: #333;
  display: flex;
  flex-direction: column;
}

.header {
  background: #c41e3a;
  color: white;
  text-align: center;
  padding: 20px;
  position: relative;
  flex-shrink: 0;
}

.header h1 {
  font-size: 28px;
  margin-bottom: 8px;
}

.header p {
  font-size: 16px;
  opacity: 0.9;
}

.logo {
  position: absolute;
  top: 15px;
  left: 20px;
  font-weight: bold;
  font-size: 18px;
}

.content {
  padding: 30px;
  overflow-y: auto;
  flex: 1;
}

.section {
  margin-bottom: 30px;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 20px;
}

.section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 20px;
  color: #c41e3a;
  margin-bottom: 15px;
  border-left: 5px solid #c41e3a;
  padding-left: 10px;
}

/* 新增：中医健康评估综述标题样式 */
.overview-title {
  text-align: center;
  border-left: none;
  padding: 10px 0;
  margin-bottom: 20px;
  color: #5c9ac7;
  font-size: 22px;
  font-weight: bold;
  background: linear-gradient(to right, #ffffff, #f0f8ff, #ffffff);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 基本信息网格样式 */
.basic-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 12px 15px;
  background: white;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.info-label {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 5px;
  font-weight: 600;
}

.info-value {
  font-size: 16px;
  color: #495057;
  font-weight: 500;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 14px;
}

.custom-table th,
.custom-table td {
  border: 1px solid #666;
  padding: 10px;
  text-align: center;
}

.custom-table th {
  color: #555;
}

.result-box {
  background: #f8f3e6;
  border: 1px solid #e0d6c0;
  padding: 15px;
  border-radius: 8px;
  font-weight: bold;
  color: #8b0000;
}

.tip {
  background: #e8f5e9;
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  color: #2e7d32;
  border-left: 4px solid #4caf50;
}

.footer-tip {
  background: #fff3cd;
  padding: 15px;
  border-radius: 8px;
  font-size: 13px;
  color: #856404;
  margin-top: 20px;
  border: 1px solid #ffeaa7;
}

.footer-tip ul {
  margin: 10px 0 0 20px;
}

.footer-tip li {
  margin: 5px 0;
}

.qrcode {
  text-align: center;
  margin: 20px 0;
}

.qrcode-placeholder {
  border: 2px dashed #ccc;
  width: 120px;
  height: 120px;
  line-height: 120px;
  margin: 0 auto;
}

.qrcode p {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}

.signature {
  text-align: right;
  padding: 10px 0;
  font-size: 14px;
  color: #888;
}

/* 添加来自sza.html的样式 */
.table-header {
  background-color: #5c9ac7;
  color: white;
  font-weight: bold;
}

.rowspan-cell {
  background-color: #d3d3d3;
  font-weight: bold;
  text-align: center;
  padding-left: 10px;
}

/* th单元格 */
.slash-wrap {
  position: relative;
  box-sizing: border-box;
  width: 150px;
  height: 80px;
}

/* 斜线 */
.slash {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 142px;
  height: 1px;
  background-color: #000;
  transform: rotate(33.62487deg);
  transform-origin: top left;
}

/* 左下角文字 */
.left {
  position: absolute;
  left: 15px;
  bottom: 15px;
}

/* 右上角文字 */
.right {
  position: absolute;
  right: 15px;
  top: 15px;
}

/* 左手和右手单元格样式 */
.hand-cell {
  width: 75px;
}

/* 寸关尺单元格样式 */
.position-cell {
  width: 75px;
}

/* 脉象图表容器 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.chart-item {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  display: flex;
  align-items: center;
}

.chart-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  text-align: center;
}

.chart-title {
  font-size: 16px;
  font-weight: bold;
  color: #555;
  width: 60px;
  flex-shrink: 0;
  margin-right: 15px;
  text-align: center;
}

.chart-container {
  height: 200px;
  width: 100%;
}

/* 脉象要素分析图容器 */
.pulse-charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 20px 0;
}

.pulse-chart {
  height: 300px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
}

/* 舌象解读部分样式 */
.tongue-analysis-container {
  width: 100%;
}

.tongue-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tongue-img {
  flex: 0 0 300px;
  text-align: center;
}

.tongue-img img {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tongue-chart-container {
  flex: 1;
  height: 280px;
  margin-left: 30px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.tongue-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: #555;
}

/* 面象解读部分样式 */
.face-content {
  align-items: stretch;
}

.face-analysis {
  flex: 1;
  display: flex;
  align-items: stretch;
  margin-left: 30px;
}

.face-analysis .tip {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h4 {
  margin: 15px 0 10px;
}

/* 体质状态评估部分样式 */
.constitution-features {
  margin: 20px 0;
}

.constitution-features h4 {
  margin-bottom: 10px;
  color: #555;
}

.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}

.diet-suggestion {
  margin: 20px 0;
}

.diet-suggestion h4 {
  margin-bottom: 10px;
  color: #555;
}

.diet-tip {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.diet-green {
  color: green;
}

.diet-red {
  color: red;
}

.season-adjustment {
  margin: 20px 0;
}

.season-adjustment h4 {
  margin-bottom: 10px;
  color: #555;
}

.exercise-adjustment {
  margin: 20px 0;
}

.exercise-adjustment h4 {
  margin-bottom: 10px;
  color: #555;
}

.exercise-movement {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
}

.exercise-movement h5 {
  margin-bottom: 8px;
  color: #555;
}

/* 从sza.html添加的样式 */
.container {
  display: flex;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.column {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.center-column {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 223px;
  padding: 0 20px;
}

.organ-group {
  margin-bottom: 35px;
}

/* 主要容器：将器官信息和图标作为整体并列 */
.organ-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  width: 100%; /* 确保不会超出父容器 */
  box-sizing: border-box; /* 包含padding和border在元素的总宽度内 */
}

.organ-content {
  flex: 1;
}

.organ-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.organ-info-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
}

.organ-name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px;
  min-width: 40px;
}

.organ-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden; /* 添加此行以防止图片超出边界 */
}

/* 左侧图标居左，右侧图标居右 */
.left-column .organ-icon {
  margin-right: 15px;
  margin-left: 0;
}

.right-column .organ-icon {
  margin-left: 15px;
  margin-right: 0;
}


.data-status-row {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
  margin-bottom: 5px;
}

.data-status-row.fei {
  border-top: 2px solid #a6dcef;
}

.data-status-row.fei span {
  color: #a6dcef;
  font-weight: bold;
}

.data-status-row.pi {
  border-top: 2px solid #20475d;
}

.data-status-row.pi span {
  color: #20475d;
  font-weight: bold;
}

.data-status-row.xinbao {
  border-top: 2px solid #6ec4b8;
}

.data-status-row.xinbao span {
  color: #6ec4b8;
  font-weight: bold;
}

.data-status-row.xin {
  border-top: 2px solid #e64c4c;
}

.data-status-row.xin span {
  color: #e64c4c;
  font-weight: bold;
}

.data-status-row.gan {
  border-top: 2px solid #f0c05a;
}

.data-status-row.gan span {
  color: #f0c05a;
  font-weight: bold;
}

.data-status-row.shen {
  border-top: 2px solid #6d4c41;
}

.data-status-row.shen span {
  color: #6d4c41;
  font-weight: bold;
}


.data-status {
  font-size: 14px;
}

.status-normal {
  color: #4caf50;
}

.status-deficiency {
  color: #e64c4c;
}

.status-no-data {
  color: #9e9e9e;
}

.stars {
  display: flex;
  align-items: center;
}

.star {
  width: 14px;
  height: 14px;
  background-color: #e0e0e0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  margin-right: 3px;
}

.star-filled.fei {
  background-color: #a6dcef;
}
.star-filled.pi {
  background-color: #20475d;
}
.star-filled.xinbao {
  background-color: #6ec4b8;
}
.star-filled.xin {
  background-color: #e64c4c;
}
.star-filled.gan {
  background-color: #f0c05a;
}
.star-filled.shen {
  background-color: #6d4c41;
}

.star-half.fei {
  background: linear-gradient(90deg, #a6dcef 50%, #e0e0e0 50%);
}
.star-half.pi {
  background: linear-gradient(90deg, #20475d 50%, #e0e0e0 50%);
}
.star-half.xinbao {
  background: linear-gradient(90deg, #6ec4b8 50%, #e0e0e0 50%);
}
.star-half.xin {
  background: linear-gradient(90deg, #e64c4c 50%, #e0e0e0 50%);
}
.star-half.gan {
  background: linear-gradient(90deg, #f0c05a 50%, #e0e0e0 50%);
}
.star-half.shen {
  background: linear-gradient(90deg, #6d4c41 50%, #e0e0e0 50%);
}

.body-diagram {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.diagram-img {
  width: 100%;
  max-width: 220px;
  height: auto;
}

.symptom-risk {
  margin-top: 8px;
  font-size: 13px;
  background-color: #f9f9f9;
  padding: 8px;
  border-radius: 4px;
  border-left: 2px solid #e64c4c;
}

.organs-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 30px 0;
}

.organ-group {
  margin-bottom: 35px;
  width: 100%; /* 确保宽度适应容器 */
  box-sizing: border-box; /* 包含padding和border在元素的总宽度内 */
}

.organ-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.star-rating {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.star {
  color: #f0ad4e;
  font-size: 20px;
  margin: 0 2px;
}

.gray-star {
  color: #ccc;
}

.organ-status {
  margin-top: 5px;
  font-size: 14px;
}

.bladder-status {
  background-color: #f2dede;
  border: 1px solid #ebccd1;
  border-radius: 4px;
  padding: 10px;
  margin: 20px 0;
}

.bladder-status h3 {
  color: #a94442;
  margin-top: 0;
}

.explanation {
  margin: 20px 0;
}

.analysis-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 20px 0;
}

.analysis-left {
  flex: 3;
}

.analysis-right {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.analysis-right img {
  max-width: 200%;
  max-height: 600px;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.analysis {
  margin: 0;
  padding: 15px;
  background-color: transparent;
  border-radius: 0;
  height: auto;
  display: block;
}

.acupoint-image-container {
  text-align: center;
  margin-bottom: 10px;
}

.acupoint-image {
  max-width: 100%;
  height: auto;
  max-height: 150px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-subtitle {
  font-size: 18px;
  color: #555;
  margin: 20px 0 15px;
  border-left: 3px solid #5c9ac7;
  padding-left: 10px;
}

.result-intro {
  margin: 20px 0;
  color: #d9534f;
}

@media (max-width: 900px) {
  .container {
    flex-direction: column;
    padding: 20px;
  }

  .center-column {
    margin: 20px 0;
    padding: 0;
  }

  .column {
    width: 100%;
  }

  .analysis-container {
    flex-direction: column;
  }

  .analysis-left,
  .analysis-right {
    flex: auto;
  }

  .analysis-right img {
    max-width: 100%;
    max-height: 300px;
  }

  .charts-container {
    grid-template-columns: 1fr;
  }

  .chart-item {
    flex-direction: column;
  }

  .chart-title {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .health-report-container {
    margin: 10px;
    height: calc(100vh - 20px);
  }

  .content {
    padding: 20px;
  }

  .pulse-charts-container {
    grid-template-columns: 1fr;
  }

  /* 舌象解读响应式样式 */
  .tongue-content {
    flex-direction: column;
  }

  .tongue-img {
    flex: 0 0 auto;
    margin-bottom: 20px;
  }

  .tongue-chart-container {
    margin-left: 0;
    height: 250px;
  }

  /* 面象解读响应式样式 */
  .face-analysis {
    margin-left: 0;
  }

  /* 体质特征标签响应式 */
  .feature-tags {
    flex-direction: column;
  }

  /* 脏腑状态评估响应式样式 */
  .organ-group {
    flex: 0 0 30%;
  }

  /* 响应式基本信息网格 */
  .basic-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .charts-container {
    grid-template-columns: 1fr;
  }

  /* 脏腑状态评估响应式样式 */
  .organ-group {
    flex: 0 0 45%;
  }
}
</style>


